<template>
 <ul class="tab-bar">
   <li class="tab-bar-item tab-bar-item-active">首页</li>
   <li class="tab-bar-item">工作台 <span class="tab-close"><close-outlined class="font-size-ssm"/></span></li>
 </ul>
</template>

<script setup lang="ts">
import {CloseOutlined} from '@ant-design/icons-vue'
</script>

<style scoped>
  .tab-bar{
    height: 40px;
    background-color: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap:8px ;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .tab-bar-item{
    height: 38px;
    line-height: 38px;
    padding: 0 8px;
  }
  .tab-bar-item:hover{
    cursor: pointer;
    background-color: #f0f0f0;
  }
  .tab-bar-item-active {
    background-color: #e6f4ff;
  }
</style>